<div class="modal-content">
  <div class="modal-header">
    <h5 class="modal-title">{{ plugin.displayName || plugin.name }}</h5>
    <button
      type="button"
      class="btn-close"
      data-bs-dismiss="modal"
      [attr.aria-label]="'form.button_close' | translate"
      (click)="dismissModal()"
      [disabled]="saveInProgress"
    ></button>
  </div>
  <div class="modal-body pb-0" style="min-height: 110px">
    @if (loading) {
    <div class="text-center primary-text">
      <i class="fa fa-cog fa-spin" style="font-size: 75px"></i>
    </div>
    }

    <iframe
      width="100%"
      height="1px;"
      #custompluginui
      style="border: 0"
      sandbox="allow-same-origin allow-scripts allow-popups allow-popups-to-escape-sandbox allow-downloads allow-forms"
    >
    </iframe>

    @if (uiLoaded && pluginConfig.length && schema.singular && showSchemaForm) {
    <div class="card card-body">
      <app-schema-form
        [configSchema]="schema"
        [(data)]="pluginConfig[0]"
        (dataChanged)="schemaFormUpdatedSubject.next($event)"
        (isValid)="onIsValid($event)"
      />
    </div>
    } @if (formId) {
    <div class="card card-body">
      <app-schema-form
        [configSchema]="formSchema"
        [(data)]="formData"
        (dataChanged)="formUpdatedSubject.next($event)"
        (isValid)="formValidEvent($event)"
      />
      <div class="text-end custom-form-action-buttons">
        @if (formCancelButtonLabel) {
        <button class="btn btn-elegant" (click)="formActionSubject.next('cancel')">{{ formCancelButtonLabel }}</button>
        } @if (formSubmitButtonLabel) {
        <button class="btn btn-primary" (click)="formActionSubject.next('submit')" [disabled]="!formValid">
          {{ formSubmitButtonLabel }}
        </button>
        }
      </div>
    </div>
    } @if (pluginSpinner) {
    <div class="loading-overlay text-center primary-text d-flex align-items-center justify-content-center">
      <i class="fa fa-cog fa-spin" style="font-size: 75px"></i>
    </div>
    }
  </div>
  <div class="modal-footer justify-content-between">
    <div class="text-start">
      <button
        type="button"
        class="btn btn-elegant"
        data-bs-dismiss="modal"
        (click)="dismissModal()"
        [disabled]="saveInProgress"
      >
        {{ 'form.button_close' | translate }}
      </button>
    </div>
    <div class="text-center"></div>
    <div class="text-end d-flex align-items-center justify-content-end">
      @if (!saveButtonDisabled) {
      <i
        class="fa fa-xl me-2"
        [ngClass]="formIsValid ? 'fa-circle-check green-text' : (strictValidation ? 'fa-circle-exclamation red-text' : 'fa-circle-exclamation orange-text')"
        [ngbTooltip]="(formIsValid ? 'form.label_valid' : (strictValidation ? 'form.label_invalid_strict' : 'form.label_invalid')) | translate"
        container="modal"
        placement="top"
        [openDelay]="150"
        triggers="hover"
      ></i>
      }
      <button
        type="button"
        class="btn btn-primary"
        data-bs-dismiss="modal"
        (click)="savePluginConfig(true)"
        [disabled]="saveInProgress || saveButtonDisabled"
      >
        @if (!saveInProgress) { {{ 'form.button_save' | translate }} } @if (saveInProgress) {
        <i class="fas fa-spinner fa-pulse"></i>
        }
      </button>
    </div>
  </div>
</div>
